import React from 'react'
import { Breadcrumb } from 'antd';
import { useLocation } from 'react-router-dom';
import items from './itemData'
export default function BreadCrumb() {
    //获取路由对象 pathname路径
    const location = useLocation()
    let {pathname} = location
    //以及路由路径
    const yiji = "/"+pathname.split('/')[1]
    //面包屑 一级二级对应的数据
    var label = ''
    var erjilabel = ''
    //定义一个表示来判断是否为嵌套路由 二级路由是否显示
    var flag = true
    //遍历数据 来拿到pathname对应的label的值
    items.forEach(item=>{
        if(item.key == yiji){
           label = item.label
           //存在二级路由的时候
           if(item.children){
            flag = true
            item.children.forEach(child=>{
                if(child.key==pathname){
                    erjilabel = child.label
                }
            })
           }else{
            // 不存在二级路由的时候
            flag=false
           }
        }
    })
  return (
    <div className='breadcrumb'>
        <Breadcrumb>
        <Breadcrumb.Item>首页</Breadcrumb.Item>
        <Breadcrumb.Item>{label}</Breadcrumb.Item>
        {
            flag?(<Breadcrumb.Item>{`${erjilabel}`}</Breadcrumb.Item>):('')
        }
    </Breadcrumb>
    </div>
  )
}
